<template>
  <div class="copyright-box">
    <a name="topAnchor" id="topAnchor"></a>
    <div class="exhibits-box">
      <div
        class="dot describe-box"
        style="background-color: store.styleInfo.auxiliaryColor"
        v-if="scrollBoxList.length > 1"
      >
        <dotIcon :ischange="1" fontsize="20px" />
        <p class="describe-title">相关展品</p>
        <dotIcon :ischange="1" fontsize="20px" />
      </div>
      <div class="contentFlex">
        <!-- <div
          v-if="scrollBoxList.length > 4"
          class="arrow-box-right"
          @click="addCruuent(-4)"
          :style="{
            opacity: imgCurrnt === 0 ? '0.3' : '1',
            marginRight: '36px',
            userSelect: 'none',
          }"
        >
          <arrowLeft />
        </div> -->
        <div>
          <div
            ref="elScroll"
            class="exhibits-scroll-box"
            :class="'exhibits-scroll-box-style' + store.styleInfo.colorType"
          >
            <div
              @click="lookExibit(item.id)"
              v-for="(item, index) in scrollBoxList.slice(imgCurrnt, imgCurrnt + 4)"
              :key="item.id"
              class="exhibits-scroll-box-item"
            >
              <div class="t-image--fit-containBox coverBox" style="position: relative">
                <img
                  class="t-image--fit-contain t-image--position-center"
                  :src="$filters.getLinkUrl(item.coverUrl, '?imageView2/0/w/154/format/webp')"
                  alt=""
                />
                <!-- <div class="shadow"></div> -->
              </div>
              <div class="scroll-img-item-text1" :style="{}">
                <span :class="'titleText' + item.id"> {{ item.name }}</span>
                <!-- <div class="line" :class="'line' + item.id"></div> -->
              </div>
            </div>
          </div>
        </div>
        <!-- <div
          v-if="scrollBoxList.length > 4"
          class="arrow-box-right"
          @click="addCruuent(4)"
          :style="{
            opacity: scrollBoxList.length - imgCurrnt < 5 ? '0.3' : '1',
            marginLeft: '36px',
            userSelect: 'none',
          }"
        >
          <arrowRight />
        </div> -->
      </div>
    </div>
    <!-- <div class="comment-box">
      <div
        class="dot describe-box"
        style="background-color: store.styleInfo.auxiliaryColor"
        v-if="scrollBoxList.length > 0"
      >
        <dotIcon :ischange="1" fontsize="20px" />
        <p class="describe-title">展品评论</p>
        <dotIcon :ischange="1" fontsize="20px" />
      </div>
      <comment :showpieceId="route.query.id" />
      <commentLists :showpieceId="route.query.id" :projectId="projectId" />
    </div> -->
    <!-- <div class="btm-arrow">
      <a class="arrow-item" target="_self" href="javascript:void(0)" @click="stepExhibit(1)">
        <div class="arrow-img">
          <arrowLeft />
        </div>
        <span>上一个展品</span>
      </a>
      <a class="arrow-item" target="_self" href="javascript:void(0)" @click="stepExhibit(2)">
        <span>下一个展品</span>
        <div class="arrow-img">
          <arrowRight />
        </div>
      </a>
    </div> -->
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { MessagePlugin } from 'tdesign-vue-next';
import commentLists from './wapComponents/commentList.vue';
import comment from './wapComponents/comment.vue';
import buttonIcon from '@/components/title/buttonIcon.vue';
import { ref, reactive, watch } from 'vue';
import arrowLeft from './wapComponents/arrowLeft.vue';
import arrowRight from './wapComponents/arrowRight.vue';
import heardTitle from './heardTitle.vue';
import exhibitsInfoTop from './wapComponents/exhibitsInfoTop.vue';
import { useProjectStore } from '@/store';
import { useRoute } from 'vue-router';
import { exhibitShowpiece } from '@/api/templates/templates';
import { commentList } from '@/api/comment/comment';
import { moduleShowpieces } from '@/api/exhibit/exhibit';
import { imgEnter, imgLeave } from '@/pages/templatePage/wapComponents/Subunit/component/hover';
import dotIcon from './wapComponents/dotIcon.vue';
const projectId = Number(localStorage.getItem('projectId'));
const parmas = reactive({
  pageSize: 99,
  pageNo: 1,
  id: props.showpieceid,
  value: '',
});

const loading = ref(false);
const moduleId = ref(0);
const showpieceid = ref(0);
const exbitList = ref([]);
const info = ref({});
const scrollBoxList = ref([]);
const route = useRoute();
const store = useProjectStore();
moduleId.value = route.query.moduleId;
parmas.id = Number(route.query.moduleId);
exbitList.value.push(route.query.id);
const props = defineProps({
  showpieceid: Number,
});

const emit = defineEmits(['emitchangeExhi']);
// const init = async () => {
//   try {
//     let { data } = await exhibitShowpiece(moduleId.value, showpieceid.value);
//     info.value = data;
//     //console.log(data);
//   } catch {}
// };
// init();

const initList = () => {
  try {
    //console.log('parmas.id---', parmas.id);
    moduleShowpieces(localStorage.getItem('projectId'), parmas).then((res) => {
      //console.log('res.data---', res.data);
      scrollBoxList.value = res.data.data;
    });
  } catch {}
};
initList();
// init();
// 添加关注后更新请求
const changeattention = () => {
  // init();
};
const imgCurrnt = ref(0);
const addCruuent = (num: number) => {
  if (imgCurrnt.value === 0 && num < 0) {
    return;
  } else if (scrollBoxList.value.length - imgCurrnt.value < 5 && num > 0) {
    return;
  } else {
    imgCurrnt.value = imgCurrnt.value + num;
  }
};
// watch(
//   () => props.showpieceid,
//   () => {
//     // showpieceid.value = props.showpieceid;
//     parmas.id = props.showpieceid;
//     //console.log('showpieceid', props.showpieceid);
//     initList();
//     // init();
//   },
//   { deep: true, immediate: true },
// );
const lookExibit = (e: number) => {
  const element = document.getElementById('tem1-scroll-box-top');
  element.scrollIntoView({ behavior: 'smooth', block: 'start' });
  showpieceid.value = e;
  emit('emitchangeExhi', e);
  // init();
};
</script>

<style lang="less" scoped>
.describe-box {
  padding: 0 100px;
  // margin-top: 50px;
  // background: #f0e9e1;
  .describe-title {
    text-align: center;
    font-size: 18px;
    font-family: SourceHanSerifCN-Bold, SourceHanSerifCN;
    // font-weight: bold;
    color: #333333;
    line-height: 34px;
  }
}
.copyright-box {
  padding: 20px 0px;

  background: #fbf9f6;
}

.btm-arrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  margin-top: 80px;
  padding: 0 16px;
}
.arrow-item {
  display: flex;
  align-items: center;
  span {
    font-size: 17px;
    // font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 32px;
    margin: 0 8px;
  }
}
.arrow-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 30px;
  border: 1px solid #333333;
}
.heard-textarea {
  margin-top: 50px;
}
.left-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  width: 180px;
  height: 56px;
  margin-top: 32px;
  span {
    position: relative;
    z-index: 99;
  }
}
.btn-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.textarea-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  // margin-top: 28px;
}
.bottom-text {
  font-size: 14px;
  // font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 24px;
}
.textarea-buttom {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 48px;
  font-size: 16px;
  // font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 24px;
}
.comment-box {
  margin-top: 20px;
  padding: 0 16px;
}
.comment-title {
  font-size: 18px;
  // font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 25px;
}
.comment-item {
  display: flex;
  margin-top: 50px;
}
.item-right {
  flex: 1;
  margin-left: 24px;
}
.item-right-title1 {
  font-size: 16px;
  // font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 24px;
}
.item-right-title2 {
  font-size: 14px;
  // font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 22px;
  margin-left: 10px;
}
.item-right-title3 {
  font-size: 17px;
  // font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 32px;
  margin-top: 8px;
}
.t-list-item {
  background: transparent !important;
}
.dot {
  height: 30px;
  // line-height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  font-size: 20px;
  // font-family: SourceHanSerifCN-Bold, SourceHanSerifCN;
  > p {
    padding: 0 5px;
  }
}
.exhibits-scroll-box {
  width: 100%;
  display: flex;
  padding: 0 23px;
  overflow: auto;
  // margin: 0 9px;
  > .exhibits-scroll-box-item {
    width: 154px;
    // height: 154px;
    text-align: center;
    margin: 0 5px;
  }

  .t-image--fit-containBox {
    width: 154px;
    height: 154px;
    background: #f0e9e1;
  }
}
.exhibits-box {
  // padding-top: 80px;
  padding-bottom: 20px;
}
.contentFlex {
  // width: 1321px;
  display: flex;
  margin: auto;
  overflow: auto;
}
.scroll-img-item-text1 {
  padding-top: 8px;
  cursor: pointer;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arrow-box-right {
  height: 154px;
  cursor: pointer;
  :deep(.iconfonts) {
    font-size: 30px !important;
    line-height: 30px !important;
  }
}
.dotIcon {
  :deep('.iconfonts') {
    font-size: 20px;
  }
}

.shadow {
  width: 154px;
  height: 154px;
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0);
  transition: all 0.5s;
  z-index: 99;
  cursor: pointer;
  // border-radius: 50%;
}
.coverBox {
  overflow: hidden;
  img {
    transition: all 0.5s;
    width: 100%;
    height: 100%;
  }
}
// .coverBox:hover .shadow {
//   background: rgba(0, 0, 0, 0.4);
// }
// .coverBox:hover img {
//   transform: scale(1.1);
// }
.line {
  width: 0px;
  height: 1px;
  background: #000;
  transform: all 0.5s;
  margin: auto;
}
// /deep/.t-textarea__inner:hover {
//   border-color: var(--td-border-level-2-color);
// }
</style>
